<template>
  <div>
     <div id="main" style="width: 600px;height:400px;"></div>
  </div>
</template>
<script>
import {getAdminListApi} from '@/api/admin'
import {getStudentListApi} from '@/api/student'
export default {
  data(){
    return {
      chartData:[0,0] //图表需要的数据
    }
  },
  async created(){
    // 获取管理员数据和学员数据
    let adminList = await getAdminListApi({pageStart:1})
    let studentList = await getStudentListApi({pageStart:1})
    console.log(adminList)
    console.log(studentList)
    // 存储管理员数据和 学员数据
    this.chartData=[adminList.data.count,studentList.data.count]
    console.log(this.chartData,"===")
    this.drawChart();
  },
  mounted(){
    
  },
   methods:{
     drawChart(){
      // 准备echarts 操作实例
      let myChart = this.$echarts.init(document.getElementById('main'))

      // 配置项
      let option={
        title:{
          text:'用户统计'
        },
        legend:{},// 图例
        tooltip:{},// 提示
        grid:{},// 网格
        xAxis:{
          data:["管理员","学员"]
        },// x轴
        yAxis:{
          type:'value'
        },// y轴
        series:[
            {
            name:'人数',
            type:'bar',
            data:this.chartData //整理学员和管理员人数
            }
        ]// 数据系列
      }
    // 将配置项设置给实例
      myChart.setOption(option)
      // 监听窗口大小变化
      window.addEventListener("resize",()=>{
        myChart.resize() // 调整实例大小适配方法
      })

     }
   },
   beforeDestroy() {
    window.removeEventListener("resize",()=>{
    })
   },
}
</script>